@extends('admin.common.main')

@section('content')
    <body>
    <article class="page-container">
        <form action="{{route('admin.node.store')}}" method="post" class="form form-horizontal" id="form-member-add"
              @submit.prevent="dopost">
            @include('admin.common.error')

            @csrf
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>节点名：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" v-model="info.name" name="name">
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>路由别名：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" v-model="info.route_name" name="route_name">
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>是否是顶级：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <select name="pid" id="" class="select-box" @change="changePid">
                        <option value="0">===顶级===</option>
                        @foreach($data as  $val)
                            <option value="{{$val->id}}">{{$val->html}}{{$val->name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>是否是菜单：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    是：<input type="radio" value="1" placeholder="" name="is_menu" v-model="info.is_menu" checked>
                    否：<input type="radio" value="0" placeholder="" name="is_menu" v-model="info.is_menu">
                </div>
            </div>

            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
                    <a href="javascript:;" onclick="history.go(-1)" class="c-primary btn btn-dark radius">&lt; 返回上一页</a>
                </div>
            </div>
        </form>
    </article>
    @endsection

    @section('js')

        <!--请在下方写此页面业务相关的脚本-->
        <script src="/admin/lib/vue@3.js"></script>
        <script type="text/javascript">
            const {createApp} = Vue

            createApp({
                data() {
                    return {
                        info: {
                            _token: "{{csrf_token()}}",
                            name: '',
                            route_name: '',
                            pid: '0',
                            is_menu: '1'
                        }
                    }
                },
                //经常犯的错误
                methods: {
                    async dopost(evt) {
                        let url = evt.target.action
                        //借助validate或者自己写正则验证

                        //es7 async await 把异步请求变成同步请求
                        // $.ajax({
                        //     url:url,
                        //     method:'post',
                        //     data:this.info,
                        //     success:res=>{
                        //        if(res.code == 200){
                        //
                        //        }
                        //     }
                        // })

                        let {error_code, msg} = await $.post(url, this.info)
                        if (error_code == 0) {
                            //添加成功跳转节点列表
                            location.href = "{{route('admin.node.index')}}"
                        } else {
                            layer.msg(msg)
                        }
                    },
                    //修改菜单
                    changePid(evt){
                       let pid  = evt.target.value
                        this.info.pid = pid
                    }
                }
            }).mount('.page-container')
        </script>

@endsection
